<template>
  <div class="DetailComment">
    <DetailSlot title="热门评价">
      <template #default>
        <div class="star">
          <div class="left">
            <div class="overall">{{ commentModule?.overall }}</div>
            <div class="line"></div>
          </div>
          <div class="middle">
            <div class="scoreTitle">{{ commentModule?.scoreTitle }}</div>
            <div class="totalCount">{{ commentModule?.totalCount }}条评论</div>
            <!-- <van-rate v-model="value" readonly allow-half /> -->
            <van-rate :model-value="commentModule?.overall" readonly allow-half size="14" />
          </div>
          <div class="right">
            <ul>
              <li v-for="(item, index) in commentModule?.subScores" :key="index">{{ item }}</li>
            </ul>
          </div>
        </div>

        <div class="commentTag">
          <ul>
            <li v-for="(item, index) in commentModule?.commentTagVo" :key="index"
              :style="{ color: item.color, backgroundColor: item.backgroundColor }">{{ item.text }}</li>
          </ul>
        </div>

        <div class="commentContent">
          <div class="top">
            <img :src="commentModule?.comment?.userAvatars" alt="">
            <div class="topInfo">
              <div class="userName">{{ commentModule?.comment?.userName }}</div>
              <div class="checkInDate">{{ commentModule?.comment?.checkInDate }}</div>
            </div>
          </div>

          <div class="commentDetail">{{ commentModule?.comment?.commentDetail }}</div>
        </div>
      </template>
    </DetailSlot>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import DetailSlot from '../../../components/DetailSlot/DetailSlot.vue'

const props = defineProps({
  commentModule: {
    type: Object,
    default: () => ({})
  }
})
</script>

<style scoped lang="less">
.star {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  .left {
    width: 50px;
    height: 50px;
    margin-right: 8px;

    .overall {
      font-size: 36px;
    }

    .line {
      height: 4px;
      border-radius: 2px;
      background-color: var(--primary-color);
    }
  }

  .middle {
    .totalCount {
      font-size: 10px;
      color: #999;
    }
  }

  .right {
    flex: 1;

    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;

      li {
        line-height: 20px;
        font-size: 12px;
      }
    }
  }
}

.commentTag {
  ul {
    display: flex;
    flex-wrap: wrap;

    li {
      border-radius: 14px;
      padding: 4px;
      margin: 4px;
      line-height: 20px;
    }
  }
}

.commentContent {
  background-color: #f7f9fb;
  padding: 10px;

  .top {
    display: flex;

    img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
    }
  }

  .commentDetail {
    margin: 30px 0 10px;
  }
}
</style>
